<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圆环百分比图</title>
</head>
<style type="text/css" media="screen">
  canvas{
    background: #ccc;
  }
</style>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    var myCanvas = document.querySelector('#myCanvas');
    var ctx = myCanvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(250,250,200,-Math.PI/2,-Math.PI/2+(30/100*2*Math.PI),false);
    ctx.lineWidth=40;
    ctx.strokeStyle="red";
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(250,250,200,-Math.PI/2+(30/100*2*Math.PI),-Math.PI/2+(30/100*2*Math.PI)+(30/100*2*Math.PI));
    ctx.lineWidth=20;
    ctx.strokeStyle="green";
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(250,250,200,-Math.PI/2+(30/100*2*Math.PI)+(30/100*2*Math.PI),-Math.PI/2+(30/100*2*Math.PI)+(30/100*2*Math.PI)+(30/100*2*Math.PI));
    ctx.lineWidth=30;
    ctx.strokeStyle="yellow";
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(250,250,200,-Math.PI/2+(30/100*2*Math.PI)+(30/100*2*Math.PI)+(30/100*2*Math.PI),-Math.PI/2+(30/100*2*Math.PI)+(30/100*2*Math.PI)+(30/100*2*Math.PI)+(10/100*2*Math.PI));
    ctx.lineWidth=30;
    ctx.strokeStyle="blue";
    ctx.stroke();
    ctx.closePath();
  </script>
</body>
</html>